<template>
  <div>
    <div
      v-for="(item, index) in userInfoRule"
      :key="index"
      v-show="item.tableVisible"
    >
      <el-col :span="item.leftSpan || 4">
        <el-row class="colBorder" type="flex" justify="center" align="middle">
          <span class="left-label" :class="item.validate ? 'isRed' : ''">{{
            item.title
          }}</span>
        </el-row>
      </el-col>
      <el-col :span="item.rightSpan || 20">
        <el-row class="colBorder" type="flex" justify="center" align="middle">
          <el-date-picker
            v-if="item.type == 'date'"
            type="date"
            :editable="false"
            v-model="formData[item.field]"
            format="yyyy-MM-dd"
            value-format="yyyy-MM-dd"
            :style="{ width: '100%' }"
            clearable
          ></el-date-picker>
          <el-input
            type="text"
            v-model="formData[item.field]"
            v-if="item.type == 'input'"
          />
          <el-checkbox-group
            :max="1"
            v-model="formData[item.field]"
            v-if="item.type == 'checkbox'"
          >
            <el-checkbox
              :label="op"
              :key="op"
              v-for="op in item.options"
            ></el-checkbox>
          </el-checkbox-group>
        </el-row>
      </el-col>
    </div>
  </div>
</template>
<script>
export default {
  data() {},
  props: {
    rule: {
      type: Array,
      default: () => {
        return [];
      }
    }
  }
};
</script>
